<template>
  <div id="app">
    <div class="container">
      <router-view />
    </div>
    <div class="footer">
      <cube-tab-bar v-model="selectedLabelDefault" :data="tabs" @change="changeHandler"></cube-tab-bar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedLabelDefault: "/course",
      tabs: [
        {
          label: "首页",
          value: "/",
          icon: "iconfont icon-shouye1"
        },
        {
          label: "我的课程",
          value: "/course",
          icon: "iconfont icon-course"
        },
        {
          label: "个人中心",
          value: "/profile",
          icon: "iconfont icon-icon-emoji"
        }
      ]
    };
  },
  watch: {
    $route: {
      handler(to, from) {
        this.selectedLabelDefault = to.path; //设置成最后的路由的路径
      },
      immediate:true
    }
  },
  methods: {
    changeHandler(value) {
      this.$router.push(value);
    }
  }
};
</script>
<style lang = "stylus">
  html,body,#app{
    height 100%
  }
  #app{
    display flex        
    flex-direction column   
  }
  .container{
    flex 1
    background #eeeeee
    overflow scroll

  }
  .footer {
    background #f2f2f2
  }
  .cube-tab 
    i 
      font-size 22px
      line-height 26px

  
</style>
